{% extends "base.html" %}

{% block title %}护理员排班表 - 长者照护计划系统{% endblock %}

{% block page_title %}护理员排班表{% endblock %}

{% block extra_css %}
<style>
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid var(--tech-border);
        border-radius: 5px;
        background-color: rgba(1, 1, 43, 0.75);
    }
    
    .shift-table {
        font-size: 0.9rem;
        color: #fff;
    }
    
    .shift-table th, .shift-table td {
        padding: 0.5rem;
        border: 1px solid var(--tech-border);
    }
    
    .shift-table th {
        background-color: rgba(5, 238, 255, 0.1);
        color: var(--tech-primary);
    }
    
    .shift-row:nth-child(odd) {
        background-color: rgba(1, 1, 43, 0.6);
    }
    
    .shift-row:hover {
        background-color: rgba(5, 238, 255, 0.1);
    }
    
    .shift-visualization {
        margin-top: 20px;
    }
    
    .timeline {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    
    .timeline-row {
        display: flex;
        margin-bottom: 5px;
    }
    
    .timeline-label {
        width: 150px;
        padding-right: 10px;
        text-align: right;
        font-weight: bold;
        color: var(--tech-primary);
    }
    
    .timeline-slots {
        display: flex;
        flex-grow: 1;
        height: 30px;
        background-color: rgba(1, 1, 43, 0.4);
        border: 1px solid var(--tech-border);
    }
    
    .timeline-slot {
        position: absolute;
        height: 28px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .shift-type-1 { background-color: rgba(0, 123, 255, 0.7); }
    .shift-type-2 { background-color: rgba(40, 167, 69, 0.7); }
    .shift-type-3 { background-color: rgba(220, 53, 69, 0.7); }
    
    .form-control, .form-select {
        background-color: rgba(1, 1, 43, 0.7);
        border: 1px solid var(--tech-border);
        color: #fff;
    }
    
    .form-control:focus, .form-select:focus {
        background-color: rgba(1, 1, 43, 0.9);
        border-color: var(--tech-primary);
        color: #fff;
        box-shadow: 0 0 10px rgba(5, 238, 255, 0.5);
    }
    
    .form-label {
        color: var(--tech-primary);
        font-weight: 500;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="tech-card">
            <div class="tech-card-header">
                <h5 class="card-title"><i class="fas fa-clipboard-list me-2"></i>护理员排班表</h5>
            </div>
            <div class="tech-card-body">
                <div class="filter-section">
                    <form id="shiftFilterForm">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="caregiver" class="form-label">护理员</label>
                                <input type="text" class="form-control" id="caregiver" name="caregiver" placeholder="输入护理员姓名">
                            </div>
                            <div class="col-md-4">
                                <label for="date" class="form-label">日期</label>
                                <input type="date" class="form-control" id="date" name="date" value="{{ date.today().isoformat() }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">&nbsp;</label>
                                <div class="d-grid">
                                    <button type="button" id="filterButton" class="btn tech-btn tech-btn-primary">筛选</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <div class="shift-visualization">
                    <h6 class="text-light mb-3"><i class="fas fa-chart-timeline-variant me-2"></i>排班可视化</h6>
                    <div id="timeline" class="timeline"></div>
                </div>
                
                <div class="table-responsive mt-4">
                    <table class="table table-bordered shift-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>护理员</th>
                                <th>日期</th>
                                <th>班次</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>批次号</th>
                                <th>创建时间</th>
                            </tr>
                        </thead>
                        <tbody id="shiftTableBody">
                            {% for assignment in assignments %}
                            <tr class="shift-row" data-caregiver="{{ assignment.caregiver_name }}" data-date="{{ assignment.shift_date }}">
                                <td>{{ assignment.id }}</td>
                                <td>{{ assignment.caregiver_name }}</td>
                                <td>{{ assignment.shift_date }}</td>
                                <td>{{ assignment.shift_type }}</td>
                                <td>{{ assignment.shift_start_time }}</td>
                                <td>{{ assignment.shift_end_time }}</td>
                                <td>{{ assignment.batch_number if assignment.batch_number else '无' }}</td>
                                <td>{{ assignment.created_at }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <span class="text-light">显示 <span id="visibleCount">{{ assignments|length }}</span> 条记录，共 <span id="totalCount">{{ assignments|length }}</span> 条记录</span>
                    </div>
                    <div>
                        <button id="exportButton" class="btn tech-btn tech-btn-success">
                            <i class="fas fa-file-excel"></i> 导出到Excel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 筛选按钮点击事件
        $('#filterButton').click(function() {
            const caregiver = $('#caregiver').val().toLowerCase();
            const date = $('#date').val();
            
            // 筛选表格行
            $('.shift-row').each(function() {
                const rowCaregiver = $(this).data('caregiver').toLowerCase();
                const rowDate = $(this).data('date');
                
                const caregiverMatch = !caregiver || rowCaregiver.includes(caregiver);
                const dateMatch = !date || rowDate === date;
                
                if (caregiverMatch && dateMatch) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            
            // 更新可视化
            generateTimeline();
        });
        
        // 生成时间线可视化
        function generateTimeline() {
            const timeline = $('#timeline');
            timeline.empty();
            
            // 获取可见的行
            const visibleRows = $('.shift-row:visible');
            
            // 按护理员分组
            const caregiverGroups = {};
            
            visibleRows.each(function() {
                const caregiver = $(this).find('td:eq(1)').text();
                const date = $(this).find('td:eq(2)').text();
                const shiftType = $(this).find('td:eq(3)').text();
                const startTime = $(this).find('td:eq(4)').text();
                const endTime = $(this).find('td:eq(5)').text();
                
                if (!caregiverGroups[caregiver]) {
                    caregiverGroups[caregiver] = [];
                }
                
                caregiverGroups[caregiver].push({
                    date: date,
                    shiftType: shiftType,
                    startTime: startTime,
                    endTime: endTime
                });
            });
            
            // 创建时间线
            for (const caregiver in caregiverGroups) {
                const caregiverRow = $('<div class="timeline-row"></div>');
                const caregiverLabel = $(`<div class="timeline-label">${caregiver}</div>`);
                const caregiverSlots = $('<div class="timeline-slots"></div>');
                
                caregiverGroups[caregiver].forEach(function(shift) {
                    // 解析时间
                    const startParts = shift.startTime.split(':');
                    const endParts = shift.endTime.split(':');
                    
                    const startHour = parseInt(startParts[0]);
                    const startMinute = parseInt(startParts[1]);
                    const endHour = parseInt(endParts[0]);
                    const endMinute = parseInt(endParts[1]);
                    
                    // 计算位置和宽度
                    const startPosition = (startHour * 60 + startMinute) / (24 * 60) * 100;
                    let endPosition = (endHour * 60 + endMinute) / (24 * 60) * 100;
                    
                    // 处理跨天的情况
                    if (endPosition <= startPosition) {
                        endPosition += 100;
                    }
                    
                    const width = endPosition - startPosition;
                    
                    // 创建时间槽
                    const shiftSlot = $(`<div class="timeline-slot shift-type-${shift.shiftType.charAt(shift.shiftType.length - 1)}" style="left: ${startPosition}%; width: ${width}%;">${shift.shiftType} (${shift.startTime}-${shift.endTime})</div>`);
                    caregiverSlots.append(shiftSlot);
                });
                
                caregiverRow.append(caregiverLabel);
                caregiverRow.append(caregiverSlots);
                timeline.append(caregiverRow);
            }
            
            // 如果没有数据，显示提示
            if (Object.keys(caregiverGroups).length === 0) {
                timeline.html('<p class="text-center">没有找到排班数据</p>');
            }
        }
        
        // 初始化时生成时间线
        generateTimeline();
    });
</script>
{% endblock %}
